<template>
    <div id="content">
        <div class="menu_name">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <el-image class="avatar" :src="avatar" :fit="fit"></el-image>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link v-if="is_show" to="/admin/signin">
                            <li class="dropdown_li">
                                <span class="top">登录/注册</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/">
                            <li class="dropdown_li">
                                <span class="top">首页</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/admin/articleList">
                            <li class="dropdown_li">
                                <span class="top">后台</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/about">
                            <li class="dropdown_li">
                                <span class="top">关于</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link v-if="!is_show" to="/admin/signin">
                            <li class="dropdown_li">
                                <span @click="clearCookie" class="top">退出登录</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-row>
            <el-col :span="item_span" v-for="(item, index) in articleList" :key="index">
                <el-card class="el_card" :body-style="{ padding: '20px' }">
                    <img src="./../../assets/login_back.jpg" class="image">
                    <div @click="articleEdit(item.id)" class="article_title">{{ item.title }}</div>
                    <div class="article_info">
                        <span class="article_info_username">{{ item.author }}</span>
                        <span class="article_info_date">发表于：{{ item.created_date }}</span>
                    </div>
                    <span class="article_info_label">标签：
                            <span v-if="item.labels.length === 0">未分类</span>
                            <el-tag v-else class="tag_margin" v-for="(tag, index) in item.labels" :key="index">{{ tag
                                }}</el-tag>
                        </span>
                    <div class="bottom clearfix">
                        <el-button @click="articleEdit(item.id)" type="success" class="modify">修改</el-button>
                        <el-button @click="deleteArticle(item.id)" type="danger" class="delete">删除</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: 'article',
        data() {
            return {
                articleList: [],
                item_span: 12,
                avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                is_show: true
            }
        },
        mounted: function () {
            var screen_width = window.screen.width;

            if (screen_width < 767) {
                this.item_span = 24;
            }

            var userInfo = JSON.parse(localStorage.getItem('user'));
            if (!userInfo) {
                this.$message.success('用户未登录，请先登录!');
                this.$router.push('/admin/signin')
            } else {
                this.is_show = false;
                this.avatar = userInfo.avatar;
                // 获取文章列表
                var _this = this;
                this.$req({
                    method: "post",
                    url: 'http://49.235.28.88:3000/article/v1/getUserArticleList',
                    data: {
                        account: userInfo.account,
                        app_sid: userInfo.app_sid
                    }
                }).then(function (res) {
                    if (res.data.status != 200) {
                        _this.$message.error(res.data.err.msg);
                    } else {
                        _this.articleList = res.data.payload.article;
                        for (var i = 0; i < _this.articleList.length; i++) {
                            if (_this.articleList[i].title.length > 7) {
                                _this.articleList[i].title = _this.articleList[i].title.substr(0, 8) + '...';
                            }
                            if (_this.articleList[i].labels.length > 0) {
                                _this.articleList[i].labels = _this.articleList[i].labels.split(',');
                            }
                        }
                    }
                }).catch(function (e) {
                    _this.$message.error('服务器可能出现异常!');
                });
            }
        },
        methods: {
            clearCookie() {
                console.log('清除缓存成功!');
                localStorage.removeItem('user');
            },
            // 跳转至文章编辑页
            articleEdit: function (id) {
                this.$router.push('/admin/articleEdit/' + id);
            },
            // 删除文章
            deleteArticle: function (id) {
                this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    roundButton: true,
                    center: true
                }).then(() => {
                    var _this = this;

                    this.$req({
                        method: "post",
                        url: 'http://49.235.28.88:3000/article/v1/deleteArticle/' + id,
                        data: {}
                    }).then(function (res) {
                        if (res.data.status == 200) {
                            _this.$message.success(res.data.payload.msg);
                            location.reload();
                        } else {
                            _this.$message.error(res.body.err.msg);
                        }
                    }).catch(function (e) {
                        this.$message.error('服务器可能存在异常!');
                    });
                }).catch(() => {
                    _this.$message({
                        type: 'info',
                        message: '取消删除文章操作!'
                    });
                });
            }
        }
    }
</script>

<style scoped>
    @media screen and (max-width: 767px) {

        .dropdown_li {
            color: black;
        }

        .avatar {
            width: 48px;
            height: 48px;
            background-size: cover;
            border-radius: 100px;
        }

        .menu_name {
            text-align: right;
            margin: 2% 0;
        }

        .el_card {
            height: 80%;
        }

    }

    @media screen and (min-width: 767px) {
        .menu_name {
            display: none;
        }
    }

    el-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .tag_margin {
        margin-right: 5px;
    }

    .el_card {
        margin-left: 20px;
        margin-right: 30px;
        margin-top: 60px;
    }

    .article_title {
        margin: 10px;
        font-size: 18px;
        font-weight: bolder;
    }

    .article_info {
        margin: 10px 0;
    }

    .modify,
    .delete {
        margin-top: 10px;
    }

    .edit:hover {
        background: limegreen;
        color: white;
        font-weight: 600;
    }

    .delete:hover {
        background: red;
        color: white;
        font-weight: 600;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .image {
        width: 100%;
        height: 250px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
